{extend name="public/layout" /}
{block name="head_css"}
    <style>
        body {
            background-color: #fff;
        }

        .sam-header {
            position: absolute;
            top: 0;
            left: 0;
            background-color: transparent;
        }

        .sam-header .back,.sam-header .name,.sam-header .edit {
            display: inline-block;
            vertical-align: middle;
        }

        .sam-header .back {
            width: 20%;
            font-size: 0;
        }

        .sam-header .back>a .arrow,.sam-header .back>a .words {
            display: inline-block;
            vertical-align: middle;
        }

        .sam-header .back>a .arrow {
            width: 30%;
            padding-top: 30%;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('/static/index/image/icon_arrow_back_fff.png');
        }

        .sam-header .back>a .words {
            font-size: 1rem;
        }

        .sam-header .name {
            width: 60%;
            font-size: 1rem;
            color: #fff;
            text-align: center;
        }

        .sam-header .edit {
            width: 20%;
            text-align: right;
            font-size: 1rem;
        }

        .sam-header .back>a,.sam-header .back>a:active {
            color: #fff;
            text-decoration: none;
        }

        .sam-header .edit>a,.sam-header .edit>a:active {
            color: #333;
            text-decoration: none;
        }

        .header-wrapper {
            padding-top: 59.2%;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('/static/index/image/user_top_background.png');
            position: relative;
        }

        .header-wrapper .info-box {
            width: 60%;
            position: absolute;
            top: 28%;
            left: 20%;
        }

        .header-wrapper .info-box .shotcut {
            width: 33%;
            padding-top: 33%;
            border-radius: 100%;
            background-color: rgba(254,153,0,1);
            margin: auto;
            overflow: hidden;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }

        .header-wrapper .info-box .nickname {
            font-size: .9rem;
            color: #fff;
            text-align: center;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            margin-top: 5%;
        }

        .list-box {
            padding-top: 8%;
            padding-bottom: 3%;
        }

        .list-box>a {
            width: 80%;
            margin-left: auto;
            margin-right: auto;
            color: #333;
            font-size: 0;
            text-decoration: none;
            display: block;
            margin-bottom: 10px;
            box-sizing: border-box;
            padding: 5px;
            box-shadow: 0 1px 1px 1px rgba(0,0,0,.07);
            border-radius: 3px;
        }

        .list-box>a:active {
            background-color: #fbfbfb;
        }

        .list-box>a .icon,.list-box>a .words,.list-box>a .arrow {
            display: inline-block;
            vertical-align: middle;
        }

        .list-box>a .icon {
            width: 6%;
            padding-top: 6%;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
        }

        .list-box>a .arrow {
            width: 6%;
            padding-top: 6%;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('/static/index/image/icon_arrow_back_333.png');
            transform: scaleX(-1);
            -webkit-transform: scaleX(-1);
        }

        .list-box>a .words {
            width: 84%;
            margin-left: 2%;
            margin-right: 2%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: .9rem;
        }

        .list-box>a .icon.publish {
            background-image: url('/static/index/image/icon_list_publish_ff7200.png');
        }

        .list-box>a .icon.image {
            background-image: url('/static/index/image/icon_list_image_ff7200.png');
        }

        .list-box>a .icon.video {
            background-image: url('/static/index/image/icon_list_video_ff7200.png');
        }

        .list-box>a .icon.record {
            background-image: url('/static/index/image/icon_list_record_ff7200.png');
        }

        .list-box>a .icon.aboutus {
            background-image: url('/static/index/image/icon_list_aboutus_ff7200.png');
        }

        .submit-btn {
            width: 80%;
            box-sizing: border-box;
            padding: 5px 0;
            background-color: #ff7200;
            font-size: 1.1rem;
            color: #fff;
            text-align: center;
            margin: 0 0 0 10%;
            border-radius: 3px;
            border: none;
        }

        .copyright {
            position: absolute;
            bottom: 3%;
            left: 0;
            font-size: .7rem;
            color: #777;
            text-align: center;
        }
    </style>
{/block}
{block name="main"}
    <div class="container header-wrapper">
        <!-- 头部 -->
        <div class="container sam-header">
            <div class="back">
                <a href="{:url('index/index')}">
                    <div class="arrow"></div>
                </a>
            </div>
            <div class="name">个人中心</div>
        </div>
        <!-- 头部 END -->

        <!-- 用户信息框 -->
        <div class="info-box">
            <div class="shotcut"></div>
            <div class="nickname">{$user_name}</div>
        </div>
        <!-- 用户信息框 END -->
    </div>

    <!-- 列表框 -->
    <div class="list-box">
        <a class="list-item sam-white-bg" href="{:url('engineering/add')}">
            <div class="icon publish"></div>
            <div class="words">发布需求</div>
            <div class="arrow"></div>
        </a>
        <a class="list-item sam-white-bg" href="{:url('pic/add')}">
            <div class="icon image"></div>
            <div class="words">发布图片</div>
            <div class="arrow"></div>
        </a>
        <a class="list-item sam-white-bg" href="{:url('video/add')}">
            <div class="icon video"></div>
            <div class="words">发布小视频</div>
            <div class="arrow"></div>
        </a>
        <a class="list-item sam-white-bg" href="{:url('engineering/my_list',array('order'=>1))}">
            <div class="icon record"></div>
            <div class="words">我的发布</div>
            <div class="arrow"></div>
        </a>
        <a class="list-item sam-white-bg" href="{:url('article/index',array('id'=>3))}">
            <div class="icon aboutus"></div>
            <div class="words">关于我们</div>
            <div class="arrow"></div>
        </a>
    </div>
    <!-- 列表框 END -->

    <button onclick="logout()" type="button" class="submit-btn">退出当前账号</button>

    <div class="container copyright">由声谷网提供技术支持</div>
{/block}
{block name="footer"}
{/block}
{block name="script"}
    <script>
        function logout(){
            window.location.href = '{:url('index/login/logout')}';
        }
    </script>
{/block}